Vue Router 教程

1. 简介

Vue Router 是 Vue.js 的官方路由管理器。它允许你构建单页面应用（SPA），通过路由来管理不同页面之间的导航。Vue Router 提供了丰富的功能，如动态路由、嵌套路由、路由参数、导航守卫等。

2. 安装和配置

2.1 安装 Vue Router

首先，你需要在你的 Vue 项目中安装 Vue Router。你可以使用 npm 或 yarn 来安装：

npm install vue-router

或

yarn add vue-router

2.2 配置 Vue Router

在你的项目中创建一个 router.js 文件，并配置路由：

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

然后在你的 main.js 文件中引入并使用这个路由配置：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

3. 基本使用

3.1 定义路由

在 router.js 中定义你的路由。每个路由对象包含一个 path 和一个 component：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

3.2 使用 <router-link> 进行导航

在模板中使用 <router-link> 组件来创建导航链接：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

3.3 使用 <router-view> 渲染组件

<router-view> 组件用于渲染当前路由对应的组件：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

4. 动态路由

动态路由允许你定义带有参数的路由。例如，你可以定义一个动态路由来显示用户详情：

const routes = [
  { path: '/user/:id', component: User }
]

在 User 组件中，你可以通过 this.$route.params.id 来获取路由参数：

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

5. 嵌套路由

嵌套路由允许你在组件内部定义子路由。例如，你可以在 User 组件中定义子路由：

const routes = [
  { 
    path: '/user/:id', 
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

在 User 组件中，使用 <router-view> 来渲染子路由：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <router-view></router-view>
  </div>
</template>

6. 导航守卫

导航守卫允许你在路由切换前后执行一些逻辑。常见的导航守卫有：

• beforeEach: 全局前置守卫
• beforeEnter: 路由独享守卫
• beforeRouteEnter: 组件内守卫

例如，你可以在全局前置守卫中检查用户是否登录：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login')
  } else {
    next()
  }
})

7. 实践练习

7.1 创建一个简单的博客应用

1. 创建一个 Home 组件，显示博客列表。
2. 创建一个 Post 组件，显示单篇博客内容。
3. 使用动态路由来显示不同的博客文章。
4. 在 Post 组件中使用导航守卫来检查用户是否登录。

7.2 代码示例

// router.js
const routes = [
  { path: '/', component: Home },
  { path: '/post/:id', component: Post, meta: { requiresAuth: true } }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login')
  } else {
    next()
  }
})

<!-- Home.vue -->
<template>
  <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="'/post/' + post.id">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, title: 'First Post' },
        { id: 2, title: 'Second Post' }
      ]
    }
  }
}
</script>

<!-- Post.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: {
        id: this.$route.params.id,
        title: 'Post Title',
        content: 'Post Content'
      }
    }
  }
}
</script>

8. 总结

Vue Router 是 Vue.js 中非常重要的一个组件，它帮助你管理应用的路由和导航。通过本教程，你应该已经掌握了 Vue Router 的基本使用方法，包括路由配置、动态路由、嵌套路由和导航守卫。希望你能通过实践练习进一步巩固这些知识，并在实际项目中灵活运用。